<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义JS对象</title>

</head>
<body>
<table border="1px">
    <caption>商品表</caption>
    <tr>
        <th>商品名称</th>
        <th>商品价格</th>
        <th>商品库存</th>
    </tr>

</table>
<script>
    //3.定义一个数组，存放多个商品对象
    let productArr=[
        {title:"小米14",price:8000,num:200},
        {title:"华为Mate60",price:5000,num:300},
        {title:"苹果16",price:8000,num:400},
        {title:"魅族",price:8000,num:500}

    ];
    console.log(productArr);
    console.log(productArr[2]);

    let tableE=document.querySelector('table');
    for (let i=0;i<productArr.length;i++){
        let trE=document.createElement('tr');
        let titleTd=document.createElement('td');
        let priceTd=document.createElement('td');
        let numTd=document.createElement('td');

        titleTd.innerHTML=productArr[i].title;
        priceTd.innerHTML=productArr[i].price;
        numTd.innerHTML=productArr[i].num;
        trE.append(titleTd,priceTd,numTd);
        tableE.append(trE);
    }



    //实例化一个自带属性与方法的对象
    let p1={
        name:'张三',
        age:18,
        say:function (){
            console.log('hello,我是'+this.name);
        }
    };
    console.log(p1);
    p1.say();
    //2.先定义一个空对象，在动态添加属性与方法
    let p2={};
    p2.name='李明';
    p2.age=20;
    p2.eat=function (){
        console.log(this.name+'正在吃东西');
    }
    console.log(p2);
    p2.eat();

</script>
</body>
</html>